<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>批发产品数据</h4>
          </div>
          <stream-echart></stream-echart>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-carousel
          :interval="4000"
          type="card"
          height="300px"
          :autoplay="false"
        >
          <el-carousel-item v-for="(item, index) in cardList" :key="index">
            <el-card class="box-card" style="background-color: beige;">
              <div slot="header" class="clearfix">
                <h3 class="medium">{{ item.title }}</h3>
              </div>
              <rose-echart
                :listData="item.listData"
                :id="index"
                ref="roseEchart"
                style="width: 100%;"
              ></rose-echart>
            </el-card>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>风险预警-（产品过期数量展示）</h4>
          </div>
          <!-- <circle-echart ref="columnEchart"></circle-echart> -->
          <pies-echart ref="piesEchart"></pies-echart>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="padding-top: 10px">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>入岚食品分析</h4>
          </div>
          <column-echart ref="columnEchart"></column-echart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <map-echart ref="mapEchart"></map-echart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>交易量与库存量对比分析</h4>
          </div>
          <!-- <circle-echart ref="columnEchart"></circle-echart> -->
          <transaction-echart ref="piesEchart"></transaction-echart>
        </el-card>
      </el-col>
    </el-row>

    <!-- <div id="myChart" style="width: 600px;height: 500px;"></div> -->
  </div>
</template>

<script>
import circleEchart from "./productModule/circleEchart";
import roseEchart from "./productModule/roseEchart";
import columnEchart from "./productModule/columnEchart";
import streamEchart from "./productModule/streamEchart";
import transactionEchart from "./productModule/transactionEchart";
import piesEchart from "./productModule/piesEchart";
import mapEchart from "./productModule/mapEchart";

// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "chart",
  components: {
    columnEchart,
    circleEchart,
    roseEchart,
    streamEchart,
    mapEchart,
    transactionEchart,
    piesEchart
  },
  data() {
    return {
      listArr: [], //城市json
      type: 0,
      cardList: [
        {
          title: "种植",
          listData: [
            // { value: 1548, name: "主体数据量" },
            // { value: 735, name: "产品数据量" },
            // { value: 580, name: "交易数据量" }
            { value: 1048, name: "主体数据量" },
            { value: 735, name: "产品数据量" },
            { value: 580, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 1048 + 735 + 580,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "养殖",
          listData: [
            { value: 234, name: "主体数据量" },
            { value: 22, name: "产品数据量" },
            { value: 34, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 234 + 22 + 34,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "生产",
          listData: [
            { value: 564, name: "主体数据量" },
            { value: 32, name: "产品数据量" },
            { value: 432, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 564 + 32 + 432,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "入岚",
          listData: [
            { value: 345, name: "主体数据量" },
            { value: 224, name: "产品数据量" },
            { value: 23, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 345 + 224 + 23,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "批发",
          listData: [
            { value: 1233, name: "主体数据量" },
            { value: 544, name: "产品数据量" },
            { value: 433, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 1233 + 544 + 433,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "农贸",
          listData: [
            { value: 434, name: "主体数据量" },
            { value: 432, name: "产品数据量" },
            { value: 234, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 434 + 432 + 234,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "零售",
          listData: [
            { value: 543, name: "主体数据量" },
            { value: 123, name: "产品数据量" },
            { value: 21, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 543 + 123 + 21,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "配送",
          listData: [
            { value: 434, name: "主体数据量" },
            { value: 334, name: "产品数据量" },
            { value: 334, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 434 + 334 + 334,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          title: "餐饮",
          listData: [
            { value: 234, name: "主体数据量" },
            { value: 44, name: "产品数据量" },
            { value: 22, name: "交易数据量" },
            {
              // make an record to fill the bottom 50%
              value: 234 + 44 + 22,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none"
                }
              },
              label: {
                show: false
              }
            }
          ]
        }
      ],
      chunList: [
        {
          name: "鼓楼",
          num: 3480
        },
        {
          name: "台江",
          num: 3473
        },
        {
          name: "长乐",
          num: 3440
        },
        {
          name: "平潭",
          num: 3434
        },
        {
          name: "福清",
          num: 3420
        },
        {
          name: "仓山",
          num: 3413
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.item {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

#myChart {
  width: 400px;
  height: 400px;
}
</style>
